<template>
    <div>
        <van-nav-bar
        title="我的订单"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        />
        <van-tabs @click-tab="getOrderData" v-model:active="active" >
            <van-tab v-for="(item,index) in statusList" :title="item.text" :name="item.value" :key="index">
                <van-card
                v-for="item in order"
                :key="item.id"
                :price="item.amount"
                :desc="'收件人:'+item.consignee+' '+'手机号:'+item.mobile"
                :title="'订单号:'+item.code"
                :thumb="item.info[0]?item.info[0].product.thumbs_text:'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
                @click-thumb="clickThumb(item.info[0]?item.info[0].product.id:0)"
                >
                    <template #tags>
                        <div style="color: #969799;">下单时间： {{ item.createtime }}</div>
                    </template>
                    <template #num>
                        <van-tag type="danger">{{ item.status_text }}</van-tag>
                    </template>
                    <template #footer>
                        <van-button type="primary" size="mini" @click="orderInfo(item.id)">订单详情</van-button>
                        <van-button type="success" size="mini" @click="pay(item.id)" v-if="item.status == '0'">确认支付</van-button>
                        <van-button type="success" size="mini" @click="confirm(item.id)" v-if="item.status == '2'">确认收货</van-button>
                        <van-button type="danger" size="mini" @click="expressInfo(item.id)" v-if="item.expressid">物流详情</van-button>
                        <van-button type="danger" size="mini" @click="refund(item.id)" v-if="item.status > 0 && item.status != 4" >申请退款</van-button>
                        <van-button type="warning" size="mini" @click="commentDetail(item.id)"  v-if="item.status == '4'">评价详情</van-button>
                        <van-button type="danger" size="mini" @click="goRefund(item.id)" v-if="(item.status == '-3') && !item.back_status" >待退货</van-button>
                        <van-button type="warning" size="mini" @click="refundInfo(item.id)" v-if="item.status < 0">退货详情</van-button>
                    </template>
                </van-card>
            </van-tab>
        </van-tabs>
    </div>

</template>

<script setup>
import { getCurrentInstance, onBeforeMount } from "vue";

const {proxy} = getCurrentInstance()
const onClickLeft = () => proxy.$router.push("/business/index");

const statusList = ref([
    {text:"全部",value:""},
    {text:"未支付",value:0},
    {text:"已支付",value:1},
    {text:"已发货",value:2},
    {text:"已收货",value:3},
    {text:"已完成",value:4},
    {text:"售后中",value:-1},
    {text:"售后完成",value:-4},
])

const active = ref("");

const userInfo = proxy.$cookies.get("business")?proxy.$cookies.get("business"):{};

onBeforeMount(()=>{
    getOrderData()
})

// 获得订单数据
let order = ref([])
let getOrderData = async () => {
    let data = {
        status:active.value,
        busid:userInfo.id
    }
    let result = await proxy.$POST({
        url:"/business/order",
        params:data
    })
    if(result.code){
        order.value = result.data
        return false
    }else{
        proxy.$fail(result.msg);
        return false
    }
}

// 订单详情
let orderInfo = (orderid) => {
    proxy.$router.push({
        path:"/order/info",
        query:{orderid}
    })
}

// 支付
const pay = async (orderid)=>{
    proxy.$dialog({
        title:"提醒",
        message:"确认要立即支付吗?"
    }).then(async()=>{
        let data = {
            // 订单id
            orderid,
            // 用户id
            busid:userInfo.id
        }
        let result = await proxy.$POST({
            url:"/cart/payOrder",
            params:data,
        })
        if(result.code){
            proxy.$success({
                message:result.msg,
                duration:1000,
                onClose:()=>{
                    getOrderData()
                }
            })
        }else{
            proxy.$fail(result.msg)
            return false
        }
    }).catch(err=>{
        console.log(err)
    })
}

// 收货
const confirm = async (orderid)=>{
    proxy.$dialog({
        title:"提醒",
        message:"确认收到货了吗?"
    }).then(async()=>{
        let data = {
            // 订单id
            orderid,
        }
        let result = await proxy.$POST({
            url:"/business/confirm",
            params:data,
        })
        if(result.code){
            getOrderData()
        }else{
            proxy.$fail(result.msg)
            return false
        }
    }).catch(err=>{
        console.log(err)
    })
}

// 退款
const refund =  (orderid) => {
    proxy.$router.push({
        path:"/order/refund",
        query:{
            orderid
        }
    })
}

// 物流详情
const expressInfo = (orderid) => {
    proxy.$router.push({
        path:"/order/express",
        query:{orderid}
    })
}

// 退货详情
const refundInfo = (orderid) => {
    proxy.$router.push({
        path:"/order/refundInfo",
        query:{orderid}
    })
}

// 退货
const goRefund = (orderid) => {
    proxy.$router.push({
        path:"/order/goRefund",
        query:{orderid}
    })
}

// 评价详情
let commentDetail = (orderid) => {
    proxy.$router.push({
        path:"/order/commentDetail",
        query:{orderid}
    })
}

// 点击商品图片
const clickThumb = (proid) => {
    proxy.$router.push({
        path:"/product/detail",
        query:{proid}
    })
}

</script>